<template>
	<view class="container">
		<view class="order_list">
			<u-tabs :list="tabsList" bg-color="#F2615F" active-color="#FFFFFF" inactive-color="#FFFFFF"
				:is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="order_box">
			<view class="order flex-between" v-for="item in list" :key="item.id">
				<view class="order_left">
					<text
						class="left_tips">{{ current == 0 ? '出售中' : current == 1 ? '已出售' : current == 2 ? '已购买' : '已撤销' }}</text>
					<view class="left_title flex">
						<view class="title">数量：</view> {{ item.amount }}
					</view>
					<view class="left_title flex" v-if="current == 0 || current == 3"> <text
							class="title">单价：</text>{{ item.unitPrice }}</view>
					<view class="left_title flex" v-if="current == 1 || current == 2"> <text
							class="title">单价：</text>{{ item.unitPrice }}</view>
					<view class="left_title flex" v-if="current == 0 || current == 3"> <text
							class="title">剩余数量：</text>{{ item.remainingAmount }}</view>
					<view class="left_title flex" v-if="current == 0 || current == 3"> <text
							class="title">时间：</text>{{ item.createdAt }}</view>
					<view class="left_title flex"> <text class="title">订单号：</text>{{ item.orderNo }}</view>
				</view>
				<view class="order_right">
					<view v-if="current == 0" @click="onCancel(item)" class="btn cal flex-center">
						撤销
					</view>
					<view v-if="current == 0" @click="showTips = true" class="btn con flex-center">
						分享
					</view>
					<!-- <view v-if="current == 3" @click="onDel(item)" class="btn con flex-center">
						删除
					</view> -->
				</view>
			</view>
		</view>
		<uni-load-more :status="listStatus"></uni-load-more>


		<my-popup-tips :showTips="showTips" :mask="true" type="bottom" @tipsOpen="tipsOpen" @tipsClose="tipsClose">
			<view class="tipsBox">
				<view class="tipsTitle">
					分享到
				</view>
				<view class="shareBox flex-between">
					<view class="shareItem flex-row" v-for="(item, index) in shareList" :key="index"
						@click="onShareItem(item)">
						<image class="wechatIcon" :src="item.wechatIcon"></image>
						<view class="wechatText">
							{{ item.wechatText }}
						</view>
					</view>
				</view>
			</view>
		</my-popup-tips>
		<u-popup v-model="cancelShow" mode="center" width="598rpx" height="340rpx" border-radius="14">
			<view class="buy_popup">
				<view class="tips">
					提示
				</view>
				<text class="cancel_ flex-center">您确定要撤销吗？</text>
				<view class="btn_two flex-between">
					<view @click="cancelShow = false" class="btn_can_ btn_cal flex-center">
						取消
					</view>
					<view @click="onCancelShow" class="btn_can_ btn_con flex-center">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showDel" mode="center" width="598rpx" height="340rpx" border-radius="14">
			<view class="buy_popup">
				<view class="tips">
					提示
				</view>
				<text class="cancel_ flex-center">您确定要删除吗？</text>
				<view class="btn_two flex-between">
					<view @click="showDel = false" class="btn_can_ btn_cal flex-center">
						取消
					</view>
					<view @click="onShowDel" class="btn_can_ btn_con flex-center">
						确定
					</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue";
	export default {
		components: {
			"my-popup-tips": myPopupTips,
		},

		data() {
			return {
				userid: "",
				user: {},
				interface: 4000,
				form: {
					page: 1,
					lastId: 0,
				},
				loading: false,
				finished: false,
				list: [],

				cancelId: "", // 撤消id
				delId: "", // 删除id

				tabsId: 0, // 我的出售接口 出售中0  已出售3 已撤销-9  我的买单列表 已购买
				tabsList: [{
					name: '出售中'
				}, {
					name: '已出售'
				}, {
					name: '已购买'
				}, {
					name: '已撤销'
				}],
				current: 0,
				cancelShow: false,
				showDel: false,
				showTips: false,
				shareList: [
					// #ifdef APP-PLUS
					{
						provider: "weixin",
						type: 0,
						title: "伯贝分享", // 标题
						scene: "WXSceneSession", // 微信好友
						summary: "", // 分享内容的摘要
						href: "", // type为0链接必须存在 需要拼接上商品的id
						imageUrl: "", // 缩略图
						wechatIcon: "http://www.bobei.shop/static/home/wechatIcon.png",
						wechatText: "微信",
					},
					{
						provider: "weixin",
						type: 0,
						title: "伯贝分享", // 标题
						scene: "WXSceneTimeline", // 微信朋友圈
						summary: "", // 分享内容的摘要
						href: "", // type为0链接必须存在 需要拼接上商品的id
						imageUrl: "", // 缩略图
						wechatIcon: "http://www.bobei.shop/static/home/friendIcon.png",
						wechatText: "朋友圈",
					},
					// #endif
					{
						provider: "",
						type: "",
						title: "",
						scene: "",
						summary: "", // 分享内容的摘要
						href: "", // type为0链接必须存在 需要拼接上商品的id
						imageUrl: "", // 缩略图
						wechatIcon: "http://www.bobei.shop/static/third/copyLink.png",
						wechatText: "复制链接",
					},
				],

				inviteCode: "",
				user: {},
			}
		},
		onLoad(option) {
			this.userid = option.userid;
			if (option.inviteCode) {
				uni.setStorageSync('inviteCode', option.inviteCode);
			}
		},
		onShow() {
			this.refresh();
			if (uni.getStorageSync('token')) {
				this.getUser();
			}

		},
		onReachBottom() {
			this.getList();
		},
		computed: {
			listStatus() {
				if (this.finished) return "noMore";
				if (this.loading) return "loading";
				return "more";
			},
		},
		methods: {
			getUser() {
				this.$post({
					module: 'User',
					interface: 1000,
				}).then(res => {
					this.user = res;
					this.getInvInfo();
				})
			},
			getInvInfo() {
				let that = this;
				that.$post({
					module: 'User',
					interface: 9001,
					data: {
						userId: that.user.id,
					},
				}).then(res => {
					that.inviteCode = res.inviteCode;
				})
			},
			onShowDel() {
				// this.$post({ // 删除已撤销订单
				// 	module: 'Market',
				// 	interface: 4002,
				// 	data: {
				// 		id: this.delId,
				// 	}
				// }).then((res) => {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		duration: 1500,
				// 		title: "操作成功",
				// 	})
				// 	this.refresh();
				// })
			},
			onDel(param) {
				this.delId = param.id;
				this.showDel = true;
			},
			onCancelShow() { // 撤销订单
				this.$post({
					module: 'Market',
					interface: 4002,
					data: {
						id: this.cancelId,
					}
				}).then((res) => {
					uni.showToast({
						icon: 'none',
						duration: 1500,
						title: "操作成功",
					})
					this.refresh();
				})
			},
			onCancel(param) {
				this.cancelId = param.id;
				this.cancelShow = true;
			},
			getList() {
				if (this.loading || this.finished) return;
				this.loading = true;
				this.$post({
					module: 'Market',
					interface: this.interface,
					data: {
						status: this.tabsId,
						user_id: this.userid,
						type: this.tabsId,
						...this.form,
					}
				}).then(res => {
					this.list = [...this.list, ...res.list];
					this.form.page = res.currentPage + 1;
					this.form.lastId = res.lastId;
					if (this.form.page > res.lastPage) {
						this.finished = true;
					}
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				})
			},
			refresh() {
				this.form.page = 1;
				this.form.lastId = 0;
				this.loading = false;
				this.finished = false;
				this.list = [];
				this.getList();
			},
			change(index) {
				// console.log(index)
				this.current = index;

				if (index == 0) {
					this.tabsId = 0;
					this.interface = 4000;
					this.refresh();
				} else if (index == 1) {
					this.tabsId = 1;
					this.interface = 4001;
					this.refresh();
				} else if (index == 3) {
					this.tabsId = -9;
					this.interface = 4000;
					this.refresh();
				} else {
					this.tabsId = 2;
					this.interface = 4001;
					this.refresh();
				}
			},
			tipsOpen(param) {
				this.showTips = param;
			},
			tipsClose(param) {
				this.showTips = param;
			},
			onShareItem(param) {
				let that = this;
				let item = param;
				item.href = "http://www.bobei.shop/h5/#/balance/otherBalance??userid=" + this.userid + "&inviteCode=" +
					that.inviteCode; // 正式
				// item.href = "http://www.hthy.top/h5/#/balance/easyOrder?userid=" + this.userid + "&inviteCode=" + that.inviteCode; // 测试
				item.imageUrl = param.wechatIcon;
				item.summary = param.title;
				if (param.wechatText !== "复制链接") {
					uni.share({
						provider: item.provider,
						scene: item.scene,
						type: item.type,
						href: item.href,
						title: item.title,
						summary: item.summary,
						imageUrl: item.imageUrl,
						success: function(res) {
							// console.log("success:" + JSON.stringify(res));
							that.showTips = false;
						},
						fail: function(err) {
							// console.log("fail:" + JSON.stringify(err));
							that.showTips = false;
						}
					});
				} else {
					// #ifdef H5
					this.$setClipboardData({
						data: item.href,
						success: function() {
							// console.log('copy success');
							that.showTips = false;
						},
						fail: function() {
							// console.log('copy fail');
							that.showTips = false;
						}
					})
					// #endif
					// #ifndef H5
					uni.setClipboardData({
						data: item.href,
						success: function() {
							// console.log('copy success');
							that.showTips = false;
						},
						fail: function() {
							// console.log('copy fail');
							that.showTips = false;
						}
					});
					// #endif
				}

			},
		}

	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;
		background-color: #F7F6FC;
	}

	.order_list {
		height: 400rpx;
		background-image: url('http://www.bobei.shop/static/third/my/Slice 55.png');
		background-size: cover;
	}

	.order_box {
		padding: 0 30rpx;
		margin-top: -300rpx;

		.order {
			width: 100%;
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-bottom: 24rpx;

			.order_left {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;

				.left_tips {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
				}

				.left_title {
					margin-top: 12rpx;

					.title {
						width: 120rpx;
					}
				}
			}

			.order_right {
				.btn {
					width: 132rpx;
					height: 52rpx;
					border-radius: 26rpx 26rpx 26rpx 26rpx;
					opacity: 1;
					border: 2rpx solid #F2615F;
					margin-bottom: 20rpx;
				}

				.cal {
					color: #F2615F;
				}

				.con {
					background-color: #F2615F;
					color: #FFFFFF;
				}
			}
		}
	}

	.tipsBox {
		background: #ffffff;
		border-radius: 32rpx 32rpx 0 0;
		padding: 40rpx 0;

		.tipsTitle {
			padding: 0 40rpx 20rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 600;
			color: #000000;
			line-height: 38rpx;
			border-bottom: 2rpx solid #999999;
		}

		.shareBox {
			margin: 40rpx 0 100rpx;
			padding: 0 40rpx;

			.shareItem {
				flex-direction: column;
				margin-right: 30rpx;

				.wechatIcon {
					width: 88rpx;
					height: 88rpx;
				}

				.wechatText {
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					margin-top: 28rpx;
				}
			}
		}

	}

	.buy_popup {
		padding: 30rpx 50rpx;

		.tips {
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 600;
			color: #000000;
			margin-bottom: 20rpx;
		}

		.numPrice {
			margin-bottom: 30rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 600;
			color: #000000;

			/deep/.u-search {
				flex: none;
				width: 300rpx !important;
				margin: 0 30rpx !important;
			}

			.num {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.allPrice {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 28rpx;
		}

		/deep/.u-radio-group {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
		}

		.btn_popup {
			width: 244rpx;
			height: 60rpx;
			background: #F2615F;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: 40rpx auto 0;
		}

		.cancel_ {
			margin: 80rpx 0 70rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 32rpx;
		}

		.btn_can_ {
			width: 196rpx;
			height: 60rpx;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			color: #FFFFFF
		}

		.btn_cal {
			color: #F2615F;
			border: 2rpx solid #F2615F;
		}

		.btn_con {
			background: #F2615F;
		}
	}
</style>
